<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舌诊结果 - 舌头状态检测系统</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            padding: 20px;
        }
        .container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 30px;
            width: 100%;
            max-width: 800px;
        }
        h1 {
            color: #333;
            margin-bottom: 20px;
            text-align: center;
        }
        .success-message {
            color: #155724;
            background-color: #d4edda;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 20px;
            text-align: center;
        }
        .error-message {
            color: #721c24;
            background-color: #f8d7da;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 20px;
            text-align: center;
        }
        .warning-message {
            color: #856404;
            background-color: #fff3cd;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 20px;
            text-align: center;
        }
        .image-container {
            margin: 20px 0;
            text-align: center;
        }
        .uploaded-image {
            max-width: 100%;
            max-height: 400px;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        .button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            margin-top: 20px;
        }
        .button:hover {
            opacity: 0.9;
        }
        .flash-messages {
            margin-bottom: 20px;
        }
        .flash-message {
            padding: 10px;
            background-color: #d4edda;
            color: #155724;
            border-radius: 4px;
            margin-bottom: 10px;
            text-align: center;
        }
        .content-section {
            margin: 25px 0;
            padding: 15px;
            border-radius: 8px;
            background-color: #fff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .section-title {
            color: #007bff;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
            margin-top: 0;
        }
        .tag {
            display: inline-block;
            padding: 3px 8px;
            background-color: #e9ecef;
            border-radius: 4px;
            margin-right: 5px;
            margin-bottom: 5px;
        }
        .tag.warning {
            background-color: #ffeeba;
            color: #856404;
        }
        .feature-item {
            border-bottom: 1px dashed #eee;
            padding: 10px 0;
        }
        .feature-header {
            font-weight: bold;
            margin-bottom: 5px;
        }
        .feature-normal {
            color: #28a745;
        }
        .feature-abnormal {
            color: #dc3545;
        }
        .feature-interpret {
            font-size: 0.9em;
            color: #666;
            margin-top: 5px;
        }
        .score-container {
            text-align: center;
            padding: 15px;
            background-color: #f0f8ff;
            border-radius: 8px;
            margin: 20px 0;
        }
        .score-value {
            font-size: 2.5em;
            color: #007bff;
            font-weight: bold;
        }
        .advice-section {
            margin-top: 10px;
        }
        .advice-category {
            font-weight: bold;
            margin-top: 15px;
            color: #28a745;
        }
        .advice-item {
            margin: 10px 0;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }
        .advice-title {
            font-weight: bold;
            color: #0056b3;
        }
        .tips-container {
            margin: 30px 0;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
            border-left: 4px solid #ffc107;
        }
        .tips-title {
            font-weight: bold;
            color: #6c757d;
            margin-bottom: 10px;
        }
        .tips-item {
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>舌诊结果</h1>
        
        <div class="flash-messages">
            {% with messages = get_flashed_messages() %}
                {% if messages %}
                    {% for message in messages %}
                        <div class="flash-message">{{ message }}</div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
        </div>
        
        {% if 'error' in analysis_result and 'invalid_image' in analysis_result %}
            <div class="warning-message">
                <h3>图片不符合要求</h3>
                <p>{{ analysis_result.error }}</p>
            </div>
            
            <div class="tips-container">
                <div class="tips-title">拍摄舌头图片的建议：</div>
                <div class="tips-item">1. 请在光线充足的环境下拍摄</div>
                <div class="tips-item">2. 请确保舌头完全伸出，且舌面朝上</div>
                <div class="tips-item">3. 请保持画面稳定，避免模糊</div>
                <div class="tips-item">4. 避免使用滤镜或过度处理的图片</div>
                <div class="tips-item">5. 舌头应居于画面中央位置</div>
            </div>
        {% elif 'error' in analysis_result %}
            <div class="error-message">
                抱歉，舌诊分析过程中出现错误: {{ analysis_result.error }}
            </div>
        {% else %}
            <div class="success-message">
                舌诊分析已完成
            </div>
            
            <!-- 显示具体返回数据的格式化视图 -->
            {% if analysis_result.get('data') %}
            <div class="content-section">
                <h2 class="section-title">舌诊分数</h2>
                <div class="score-container">
                    <div class="score-value">{{ analysis_result.data.score }}</div>
                    <div>(满分100)</div>
                </div>
            </div>
            
            {% if analysis_result.data.get('physique_name') %}
            <div class="content-section">
                <h2 class="section-title">体质分析</h2>
                <p><strong>体质类型:</strong> {{ analysis_result.data.physique_name }}</p>
                <p>{{ analysis_result.data.physique_analysis }}</p>
            </div>
            {% endif %}
            
            {% if analysis_result.data.get('syndrome_name') %}
            <div class="content-section">
                <h2 class="section-title">证型分析</h2>
                <p><strong>证型:</strong> {{ analysis_result.data.syndrome_name }}</p>
                <p>{{ analysis_result.data.syndrome_introduction }}</p>
            </div>
            {% endif %}
            
            {% if analysis_result.data.get('typical_symptom') %}
            <div class="content-section">
                <h2 class="section-title">典型症状</h2>
                {% for symptom in analysis_result.data.typical_symptom.split('；') %}
                    <span class="tag">{{ symptom }}</span>
                {% endfor %}
            </div>
            {% endif %}
            
            {% if analysis_result.data.get('risk_warning') %}
            <div class="content-section">
                <h2 class="section-title">风险提示</h2>
                <p>{{ analysis_result.data.risk_warning }}</p>
            </div>
            {% endif %}
            
            {% if analysis_result.data.get('features') %}
            <div class="content-section">
                <h2 class="section-title">舌诊特征分析</h2>
                {% for feature in analysis_result.data.features %}
                    <div class="feature-item">
                        <div class="feature-header">{{ feature.feature_group }}：
                            {% if feature.feature_situation == '正常' %}
                                <span class="feature-normal">{{ feature.feature_name }} (正常)</span>
                            {% else %}
                                <span class="feature-abnormal">{{ feature.feature_name }} ({{ feature.feature_situation }})</span>
                            {% endif %}
                        </div>
                        <div class="feature-interpret">{{ feature.feature_interpret }}</div>
                    </div>
                {% endfor %}
            </div>
            {% endif %}
            
            {% if analysis_result.data.get('advices') %}
            <div class="content-section">
                <h2 class="section-title">健康建议</h2>
                
                {% if analysis_result.data.advices.food %}
                <div class="advice-section">
                    <div class="advice-category">饮食建议</div>
                    {% for advice in analysis_result.data.advices.food %}
                        <div class="advice-item">
                            <div class="advice-title">{{ advice.title }}</div>
                            <div>{{ advice.advice }}</div>
                        </div>
                    {% endfor %}
                </div>
                {% endif %}
                
                {% if analysis_result.data.advices.sleep %}
                <div class="advice-section">
                    <div class="advice-category">生活建议</div>
                    {% for advice in analysis_result.data.advices.sleep %}
                        <div class="advice-item">
                            <div class="advice-title">{{ advice.title }}</div>
                            <div>{{ advice.advice }}</div>
                        </div>
                    {% endfor %}
                </div>
                {% endif %}
                
                {% if analysis_result.data.advices.sport %}
                <div class="advice-section">
                    <div class="advice-category">运动建议</div>
                    {% for advice in analysis_result.data.advices.sport %}
                        <div class="advice-item">
                            <div class="advice-title">{{ advice.title }}</div>
                            <div>{{ advice.advice }}</div>
                        </div>
                    {% endfor %}
                </div>
                {% endif %}
                
                {% if analysis_result.data.advices.music %}
                <div class="advice-section">
                    <div class="advice-category">音乐建议</div>
                    {% for advice in analysis_result.data.advices.music %}
                        <div class="advice-item">
                            <div class="advice-title">{{ advice.title }}</div>
                            <div>{{ advice.advice }}</div>
                        </div>
                    {% endfor %}
                </div>
                {% endif %}
                
                {% if analysis_result.data.advices.treatment %}
                <div class="advice-section">
                    <div class="advice-category">调理建议</div>
                    {% for advice in analysis_result.data.advices.treatment %}
                        <div class="advice-item">
                            <div class="advice-title">{{ advice.title }}</div>
                            <div>{{ advice.advice }}</div>
                        </div>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
            {% endif %}
            {% endif %}
        {% endif %}
        
        <div style="text-align: center;">
            <a href="/" class="button">返回首页</a>
        </div>
    </div>
</body>
</html> 